<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div id="staff_type" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped>
</style>

<script setup lang="ts" name="profileStaffTypeIndex">
import * as echarts from 'echarts'
const title = '招聘转化率'
const option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%',
    show: false
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
  },
  series: [
    {
      name: 'Expected',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        formatter: '{b}',
        fontSize: 20,
        color: '#000000'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}'
        }
      },
      data: [
        { value: 100, name: '初筛通过人数 800' },
        { value: 70, name: '参加面试人数 400' },
        { value: 50, name: '面试通过人数 400' },
        { value: 30, name: '录用人数 400' },
        { value: 10, name: '到岗人数 400' }
      ]
    },
    {
      name: 'Actual',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        position: 'inside',
        formatter: '{c}%',
        fontSize: 20,
        color: '#000000'
      },
      itemStyle: {
        opacity: 0.5,
        borderColor: '#fff',
        borderWidth: 0
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{c}%',
          fontSize: 20
        }
      },
      data: [
        { value: 100, name: '初筛通过人数 800' },
        { value: 70, name: '参加面试人数 400' },
        { value: 50, name: '面试通过人数 400' },
        { value: 30, name: '录用人数 400' },
        { value: 10, name: '到岗人数 400' }
      ],
      // Ensure outer shape will not be over inner shape when hover.
      z: 100
    }
  ]
};


setTimeout(function () {
	const chart = echarts.init(document.getElementById('staff_type'))
	chart.setOption(option)
}, 500)
</script>
